<template>
  <view class="main-box" >
    <view class="containerBody">
      <u-image
        v-if="messageList.length === 0"
        style="margin-top: 120rpx;"
        width="100%"
        height="520rpx"
        src="../../../static/images/nodata.png"
      ></u-image>
      <view name="unRead" v-if="unReadMessageList.length > 0">
        <view v-for="item in unReadMessageList" :key="item.id">
          <view
            style="font-size: 30rpx; color: #606c81; margin: 20rpx 0px 10rpx;"
          >
            <text
              style="
                width: 20rpx;
                height: 20rpx;
                background: #2b4fa3;
                border-radius: 50%;
                display: inline-block;
                margin-right: 30rpx;
              "
            ></text>
            <text>{{ changeTimeDate(item.sendTime) }}</text>
          </view>
          <view
            style="
              color: #606c81;
              font-size: 24rpx;
              margin-left: 50rpx;
              margin-bottom: 8rpx;
              border-bottom:1rpx solid #E3E9F3;
              padding-bottom: 15rpx;
            "
          >
            {{ item.message }}
          </view>
        </view>
      </view>
      <u-divider
        v-if="readMessageList.length > 0"
        text="以下是看过的内容"
        textColor="red"
        lineColor="red"
      ></u-divider>
      <view name="read" v-if="readMessageList.length > 0">
        <view v-for="item in readMessageList" :key="item.id">
          <view
            style="font-size: 30rpx; color: #606c81; margin: 20rpx 0px 10rpx;"
          >
            <text
              style="
                width: 20rpx;
                height: 20rpx;
                background: #2b4fa3;
                border-radius: 50%;
                display: inline-block;
                margin-right: 30rpx;
              "
            ></text>
            <text>{{ changeTimeDate(item.sendTime) }}</text>
          </view>
          <view
            style="
              color: #606c81;
              font-size: 24rpx;
              margin-left: 50rpx;
              margin-bottom: 8rpx;
            "
          >
            {{ item.message }}
          </view>
          <u-line color="#D6DFEC"></u-line>
        </view>
      </view>
    </view>
    <view style="position: fixed; bottom: 0px; z-index: 3; width: 100%">
      <cmp-tab-bar :tabBarList="tabBarList"></cmp-tab-bar>
    </view>
  </view>
</template>

<script>
import cmpTabBar from '../../../components/cmp-tab-bar.vue'
import { getMessageListData, updateMessagesFun } from '@/service/services.js'
import { mapState } from 'vuex'
import moment from 'moment'
export default {
  data() {
    return {
      readMessageList: [],
      unReadMessageList: [],
      messageList: []
    }
  },
  components: {
    cmpTabBar,
  },
  computed: mapState({
    userInfo(item) {
      return item.userInfo
    },
    tabBarList(item) {
      return item.tabBarList
    },
  }), 
  onLoad: () => {
    
  }, 
  onShow() {
    getMessageListData({ userId: this.userInfo.userId }).then((res) => {
      this.readMessageList = []
      this.unReadMessageList = []
      if (res.data.length > 0) {
        res.data.forEach((msgItem) => {
          if (msgItem.status == '0') {
            this.readMessageList.push(msgItem)
          } else {
            this.unReadMessageList.push(msgItem)
          }
        })
      }
      this.messageList = res.data
    })
    uni.hideTabBar({
      animation: false,
    })
  },
  watch: {
    $route: {
      handler(newRouter, fromRouter) {
        if (
          fromRouter &&
          fromRouter.path == '/pages/leader-daily/daily-message-home/index'
        ) {
          updateMessagesFun({
            userId: this.userInfo.userId,
          })
        }
      },
      immediate: true,
    },
  },
  methods: {
    changeTimeDate(timeData) {
      return moment(timeData).format('YYYY-MM-DD')
    },
  },
}
</script>
<style lang="scss" scoped>

.u-item-mes {
  display: flex;
  justify-content: center;
  margin-left: 30rpx;
  height: 126rpx;
  position: relative;
}
.containerBody {
  position: relative;
  flex: 1;
  margin: 0rpx 24rpx 160rpx 24rpx;
  box-sizing: border-box;
  z-index: 2;
}
</style>
